<template>
	<view class="page-container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<x-status-bar></x-status-bar>
			<view class="flex-center-between header-navbar">
				<x-back-btn></x-back-btn>
				<view class="u-f-40 common-title">{{ lang_setting.accountSafe }}</view>
				<view></view>
			</view>
			<!-- 分割线 -->
			<u-gap height="1" bgColor="rgba(0, 0, 0, 0.07)"></u-gap>
		</view>

		<!-- 内容 -->
		<view>
			<view v-for="(list, lindex) in navs" :key="lindex" :class="['bg-white', lindex > 0 ? 'u-m-t-18' : '']">
				<view v-for="(item, index) in list" :key="index" style="padding: 0 16rpx 0 16rpx;">
					<view :style="{
						borderTop: `${ index > 0 ? 2 : 0 }rpx solid #f9f9f9`
					}" class="flex-center-between u-p-24" @click="changeAction(item)">
						<view class="u-f-34 u-lh-48">{{ lang_setting[item.key] }}</view>

						<view class="flex-center">
							<view v-if="typeof item.format === 'function'" class="u-m-r-16 u-f-30 u-lh-42 color-grew">
								{{ item.format() }}</view>
							<image src="@/static/image/common/arrow_right.png" style="width: 12rpx; height: 20rpx;"
								class="clear-flex"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {

			return {
				navs: []
			}
		},
		onLoad() {

			// 初始化导航
			let navs = [
				[{
						key: 'bindPhone',
						label: '手机号码',
						format: () => {
							let currentPhone = (this.userInfo.phone || '')
							currentPhone = (currentPhone.slice(0, 3) + '****' + currentPhone.slice(-4))
							return currentPhone
						}
					},
					// {
					// 	key: 'bindEmail',
					// 	label: '电子邮件',
					// 	format: () => 'aaaa@aa.aa'
					// },
				],
				[{
					key: 'bindOther',
					label: '第三方账号绑定'
				}, ]
			].map(list => list.map(item => {
				let result = {
					...item,
					page: `/pages/user/setting/account/${ item.key }/${ item.key }`
				}
				return result
			}))
			this.navs = navs
		},
		methods: {
			changeAction(item) {
				this.jumpUrl(item.page)
			}
		}
	}
</script>

<style scoped lang="scss">

</style>
